<template>
  <modal ref="modal_1"
         :title="title"
         :isCloseConfirm="false"
         top="5%"
         width="50%"
         height="50%"
         :close-on-click-modal="false"
         @modalOpened="opened"
         @modalClose="close">
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               v-model:page="page"
               v-model:search="search"
               :permission="permissionList"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @sort-change="sortChange"
               @row-dblclick="dblclick"
               @selection-change="selectionChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    </avue-crud>
    <template #footerButton>
      <el-button type="primary" icon="el-icon-plus"  @click="handleSubmit">确定</el-button>
      <!--<el-button type="primary" icon="el-icon-circle-check"  @click="clearSelection">清空-->
      <!--</el-button>-->
      <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">关闭</el-button>
    </template>
  </modal>
</template>

<script>
import { listSelect} from "@/api/anwise/material/material";
  import {mapGetters} from "vuex";

  export default {

    data() {
      return {
        emits: ["success"],
        title:"选择物料",
        searchType:'',
        form: {},
        query: {},
        loading: true,
        dateFormat: 'YYYY-MM-DD',
        pickerOptions: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        search:{},
        selectionList: [],
        arrayList:[],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          rowKey: 'materialNo',
          selection: true,
          reserveSelection:true,
          searchLabelWidth:80,
          searchSpan:8,
          labelWidth: 150,
          menuWidth: 120,
          indexWidth:100,
          menu:false,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          delBtn: false,
          stripe: true,
          searchShowBtn:true,
          searchIndex: 3,
          searchIcon: false,
          searchEnter:true,
          selectable:(row,index)=>{
            return !this.arrayList.some((val) =>(val.materialNo === row.materialNo))
          },
          column: [
            {
              label: "物料编号",
              prop: "materialNo",
              type: "input",
              search: true,
              overHidden: true,
              sortable: true,
                width:120,
              fixed: true,
              rules: [{
                required: true,
                message: "请输入物料编号",
                trigger: "blur"
              }],
            },
              {
                  label: "客户条码",
                  prop: "barCode",
                  type: "input",
                  search:true,
                  overHidden: true,
                  sortable: true,
                  width:180,
              },
            {
              label: "物料名称",
              prop: "materialName",
              type: "input",
              search: true,
              overHidden: true,
              sortable: true,
                width:120,
              rules: [{
                required: true,
                message: "请输入物料名称",
                trigger: "blur"
              }],
            },
              {
                  label: "规格",
                  prop: "specification",
                  type: "input",
                  search:true,
                  overHidden: true,
                  sortable: true,
                  width:180,
              },
            {
              label: "类别",
              prop: "type",
              type: "select",
              filterable:true,
              search: true,
              overHidden: true,
              sortable: true,
              dicUrl: "/blade-system/dict-biz/dictionary?code=material_s_type",
              width:120,
              props: {
                label: 'dictValue',
                value: 'dictKey',
              },
              dataType: 'string',
              rules: [{
                required: true,
                message: "请选择类别",
                trigger: "blur"
              }],
            },
              {
                  label: "箱唛",
                  prop: "packLabel",
                  type: "textarea",
                  span: 24,
                  minRows:2,
                  width:120,
                  overHidden: true,
                  sortable: true,
              },
              {
                  label: "箱唛颜色",
                  prop: "labelColor",
                  type: "textarea",
                  span: 24,
                  minRows:2,
                  width:120,
                  overHidden: true,
                  sortable: true,
              },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          viewBtn: this.validData(this.permission.purchase_main_view, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      selectionLoad() {
        let arr = [];
        // console.log(this.selectionList);
        // if (this.selectionList && this.selectionList != null
        //         && this.selectionList.length > 0) {
        //   this.data.forEach(row => {
        //     if(this.selectionList.some((val) => val.materialNo === row.materialNo)) {
        //       console.log("row.id1+"+row.id)
        //       arr.push(row);
        //     }
        //   })
        // } else {
          console.log("arrayList",this.arrayList);
          if (this.arrayList) {
            this.data.forEach(row => {
              if(this.arrayList.some((val) => val.materialNo === row.materialNo)) {
                console.log("row.id2+"+row.id)
                arr.push(row);
              }
            })
          }
        // }
        this.$nextTick(() => {
          arr.forEach(item => {
            // this.$refs.crud.clearSelection();
            console.log("check"+item.id)
            this.$refs.crud.toggleRowSelection(item, true);
          })
        })
      },
      showSelect(list,searchType) {
        this.arrayList = list;
        this.searchType = searchType;
        console.log("%%%%5")
        console.log(this.arrayList);
        this.selectionList = [];
        this.$refs.modal_1.show();
        // this.onLoad(this.page);
      },
      clearData() {
        this.data = [];
        this.page.currentPage = 1;
      },
      clearSelection() {
        this.selectionList = [];
        this.arrayList = [];
        this.$refs.crud.toggleSelection();
      },
      /** 双击选中*/
      // dblclick(row) {
      //     console.log(this.selectionList);
      //     if (this.selectionList.length===0){
      //         this.$refs.crud.toggleRowSelection(row,true);
      //     }else {
      //         this.selectionList.forEach((item)=>{
      //             if (item.$index===row.$index){
      //                 this.$refs.crud.toggleRowSelection(row,false);
      //             }else {
      //                 this.$refs.crud.toggleRowSelection(row,true);
      //             }
      //         });
      //     }
      // },
      /**
       * 提交成功之后
       */
      submitAfter() {
        this.$refs.modal_1.hide()
      },
      handleSubmit() {
        console.log("setBankList")
        console.log(this.selectionList)
        this.$refs.modal_1.hide();
        this.$emit("setMaterial",this.selectionList);

        // if (this.isAdd) {
        //   this.$refs.modal_1.handleClose()
        //   // this.$emit("success", this.selectionList);
        // } else if (this.isListAdd) {
        //
        //   // this.$emit("success", this.versionId, this.selectionList);
        // }
      },
      sortChange(val) {
        console.log(val)
        this.sort = {
          prop: val.prop,
          order: val.order
        };
        let order = "";
        if (this.sort.prop && this.sort.order) {
          if (this.sort.order === "descending") {
            order = `${this.sort.prop} desc`
          } else {
            order = `${this.sort.prop} asc`
          }
        }
        this.query.orderBy = order;
        this.onLoad(this.page);
      },

      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        console.log(params);
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },



      opened() {
        //  this.onLoad(this.page);
      },
      close() {
        this.clearData();
        this.clearSelection();
      },


      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        // params.isBomList = 1;
        params.searchType = this.searchType;
        listSelect(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionLoad();
          // this.selectionClear();
        });
      },
      handleDatePickerChange(value) {
        console.log(this.search);
      },
    }
  };
</script>

<style>
  ::v-deep .el-table__row {
    height: 30px !important;
  }
  ::v-deep  .el-table__cell{
    padding:  5px !important;
  }

</style>
